<template>
	<div>
		<Card>
			<div class="ltitle">
				沟通记录
			</div>
			<Table :columns="columns" :data="work"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size="pageSize" @on-change="handlePage" />
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				work: [],
				newList: [],
				columns: [{
						title: '工单编号',
						key: 'workCode'
					},
					{
						title: '状态',
						key: 'status',
						render: (h, params) => {
							if (params.row.status === 1) {
								return h('span', ' 正在为您处理')
							}
							if (params.row.status === 2) {
								return h('span', ' 待您反馈 ')
							}
							if (params.row.status === 3) {
								return h('span', ' 待您确认 ')
							}
							if (params.row.status === 4) {
								return h('span', ' 工单已关闭 ')
							}
						}
					},
					{
						title: '提问者',
						key: 'name'
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'replylist',
												params: {
													workcode: params.row.workCode,
													uid: params.row.uid,
													status: params.row.status
												}
											})
										}
									}
								}, '回复')
							])
						}
					}
				],
				page: 1,
				pageSize: 5,
				count: 0,
				myData: []
			}
		},
		methods: {
			// 分页
			handlePage (page) {
				this.page = page
				this.getList()
			},
			// 根据页码获取数据
			getList () {
				// 获取所有未解决工单
				this.$api.get(0, '/wl/v2/feedbackWorkList/page', {
					status: 1,
					page: this.page,
					limit: this.pageSize
				}, r => {
					if (r.data.code === 0) {
						this.work = r.data.data.data
						this.count = r.data.data.total
						this.newList = []
						for (var d = 0; d < this.work.length; d++) {
							this.$api.get(0, '/usr/v2/user', {
								uId: this.work[d].uid
							}, data => {
								if (data.data.code === 0) {
									this.newList.push(data.data.data)
									for (var c = 0; c < this.newList.length; c++) {
										this.$set(this.work[c], 'name', this.newList[c].userName)
									}
								}
							})
						}
					} else {
						this.$Message.error('获取失败')
					}
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>

<style>
	div.ltitle {
		background: #eeeeff;
		padding: 15px 10px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	div.luserInfor {
		padding: 20px;
	}

	div.luserInfor img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		float: left;
		margin-right: 20px
	}

	div.linfor {
		float: left
	}

	div.luserInfor:after {
		content: '';
		display: block;
		clear: both
	}

	div.luserInfor {
		border: 1px solid #ddd;
		border-top: 0
	}
</style>
